<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2021/12/28
  Time: 23:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri ="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
  <title>闲优购</title>
  <link rel="icon" href="img/weblogo.png" >
  <link rel="stylesheet" type="text/css" href="bootstrap-5.1.3-dist/css/bootstrap.min.css"/>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css">
  <link rel="stylesheet" type="text/css" href="css/ycc.css"/>
  <script type="text/javascript" src="js/jquery-3.6.0-min.js"></script>
  <script type="text/javascript" src="bootstrap-5.1.3-dist/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.js"></script>
  <script type="text/javascript" src="js/card_user_buy_record.js"></script>
</head>
<body>
<div>
  <h5>当前位置:商品管理>>商品统计</h5>
  <div id="e1" style="width: 45%;height: 500px; float:left"></div>
  <div id="e2" style="width: 45%;height: 500px; float:left"></div>
</div>

</body>
<script>
  var myChart1 = echarts.init(document.getElementById('e1'));
  var myChart2 = echarts.init(document.getElementById('e2'));

  var commodity = []
  var commodity_key = []
  var commodity_value = []
  $.ajax({
    url:'/etReadCommoidty',
    type: 'GET',
    dataType: 'json',
    async: false,
    error: function(){
      alert('AJAX请求错误')
    },
    success: function(res){
      for(var x in res) {
        commodity_key.push(x)
        commodity_value.push(res[x])
        commodity.push({name: x, value: res[x]})
      }
    }

  })
  option1 = {
    title: {
      text: '已上架商品类型个数统计',
      subtext: '全站商品统计',
      left: 'center'
    },
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '商品类型与占比',
        type: 'pie',
        radius: '50%',
        data: commodity,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  option2 = {
    xAxis: {
      type: 'category',
      data: commodity_key
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: commodity_value,
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(180, 180, 180, 0.2)'
        }
      }
    ]
  };
    myChart1.setOption(option1)
    myChart2.setOption(option2)
</script>
</html>
